<template>
  <view :class="$style.container">
    <statistic-module :title-name="titleName" @change-time-duration="changeTimeDuration"></statistic-module>
    <list-module></list-module>
  </view>
</template>

<script setup lang='ts'>
import StatisticModule from "./statistic-module/index.vue";
import ListModule from "./list-module/index.vue";
import { ref } from "vue";

const titleName = ref<string>('燃气警情分布')
/**定义 emit 事件 */
const emit = defineEmits(["changeTimeDuration"]);

/**
 * 传递 子组件 切换时间事件
 */
function changeTimeDuration(value: number | string) {
  console.log('子组件传递切换时间', value);
  emit('changeTimeDuration', value)
}

</script>

<style lang='less' module>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
  width: 100vw;
  background: #f5f6f7;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
}
</style>
